<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级联动下拉列</title>
    <script>
        function loadCity(){
            // 获取下拉列节点
            let province = document.getElementById("province");
            let city = document.getElementById("city");
            // 定义一个数组
            let arr = new Array();
            // 该数组中的每一个元素对应一个下拉列中的所有选项
            // 即数组的元素还是数组
            arr[0] = [new Option("--城市--",-1)];
            arr[1] = [new Option("--城市--",-1),new Option("南京",1),new Option("苏州",2),new Option("常州",3),new Option("泰州",4),new Option("徐州",5),new Option("扬州",6)];
            arr[2] = [new Option("--城市--",-1),new Option("杭州",1),new Option("温州",2),new Option("宁波",3),new Option("嘉兴",4),new Option("绍兴",5)];
            arr[3] = [new Option("--城市--",-1),new Option("合肥",1),new Option("滁州",2),new Option("蚌埠",3),new Option("六安",4)];

            // 获取用户所选择的省份的索引号
            let index = province.selectedIndex;

            // 加载城市选项的时候清除之前的选项
            city.length = 0;

            // 由于用户所选择的省份的索引号与定义的数组元素的索引号是一致的
            // 将数组中对应索引的元素赋予给城市下拉列
            for(let i = 0; i < arr[index].length; i++){
                city[city.length] = arr[index][i];
            }
        }
    </script>
</head>
<body>
<select id="province" onchange="loadCity()">
    <option value="-1">--省份--</option>
    <option value="1">江苏省</option>
    <option value="2">浙江省</option>
    <option value="3">安徽省</option>
</select>
<!--
    城市下拉列的内容是根据用户选择的省份的内容而生成
    当省份为江苏省时
        城市为:南京、苏州、常州、泰州、徐州、扬州
    当省份为浙江省时
        城市为:杭州、温州、宁波、嘉兴、绍兴
    当省份为安徽时
        城市为:合肥、滁州、蚌埠、六安
-->
<select id="city">
    <option value="-1">--城市--</option>
</select>
</body>
</html>